<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset='utf-8' />
    <title>日程安排</title>
    <jsp:include page="/static/common/easyui_header.jsp"></jsp:include>
    <link href='/static/js/fullcalendar/fullcalendar.min.css' rel='stylesheet' />
    <link href='/static/js/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='/static/js/fullcalendar/lib/moment.min.js'></script>
    <script src='/static/js/fullcalendar/fullcalendar.min.js'></script>
    <script src='/static/js/fullcalendar/locale/zh-cn.js'></script>
    <script>
        $(function(){
            var add_dialog = $("#add_dialog");
            var calendar = $("#calendar");
            var cmdObj = {
                add:function(){
                    add_dialog.dialog("open");
                },
                save:function(){
                    $("#add_form").form("submit",{
                        url: "/calendar/save",
                        success: function (data){
                            var data = $.parseJSON(data);
                            if (data.success){
                                $.messager.alert("温馨提示", "操作成功!", "info", function () {
                                    add_dialog.dialog("close");
                                    calendar.fullCalendar( 'refetchEvents' );
                                });
                            }else{
                                $.messager.alert("温馨提示", data.msg, "error");
                                add_dialog.dialog("close");
                            }
                        }
                    });
                },
                cancel:function(){
                    add_dialog.dialog("close");
                }
            };
            //绑定事件
            $("a[data-cmd]").click(function(){
                var cmd = $(this).data("cmd");
                cmdObj[cmd]();
            });
            calendar.fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay',
                    theme:true
                },
                defaultDate: '2018-07-11',
                navLinks: true,
                editable: true,
                eventLimit: true,
                events: "/calendar/list",
                eventDrop:function ( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
                    $.post("/calendar/change",{start:event.start._d,end:event.end._d,id:event.id},function(data){
                        if(data.success){
                           /* alert("您的日程已修改");*/
                            $.messager.alert("温馨提示","您的日程已修改","info");
                        }else{
                            $.messager.alert("温馨提示",data.msg,"error");
                            revertFunc();
                           /* alert("日程修改失败，请重试");*/
                        };
                   });
                },
            eventClick: function(calEvent, jsEvent, view) {
                alert('行程:' + calEvent.title);
                $(this).css('border-color', 'red');
            }
            });
           /* $("#add_dialog").dialog({
                title: '新增日程',
                width: 400,
                height: 200,
                closed: true
            });*/
        })
    </script>
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }
        #calendar {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" data-cmd="add">新增日程</a>
<div id='calendar'></div>
<div id="add_dialog" class="easyui-dialog" data-options="iconCls:'icon-add',title:'新增日程',closed:true,buttons:'#add_buttons'">
    <form id="add_form" method="post">
        <table>
            <tr>
                <td><input name="title" class="easyui-textbox" data-options="prompt:'新行程'" ></td>
            </tr>
            <tr>
                <td><input name="start" class="easyui-datebox" data-options="prompt:'起始时间'"></td>
                <td><input type="hidden" name="id"></td>
            </tr>
            <tr>
                <td><input name="end" class="easyui-datebox" data-options="prompt:'结束时间'"></td>
            </tr>
        </table>
    </form>
</div>
<div id="add_buttons">
    <a class="easyui-linkbutton" data-options="plain:true" data-cmd="save">保存</a>
    <a class="easyui-linkbutton" data-options="plain:true" data-cmd="cancel">取消</a>
</div>
</body>
</html>

